/**
  * @Description: WoShop商城
  * @Author: 梧桐
  * @Copyright: 武汉一一零七科技有限公司©版权所有
  * @Link: www.s1107.com
  * @Contact: QQ:2487937004
  */
<template>
  <div class="list">
    <u-image width="100%" height="520" :src="bannerSrc"></u-image>
    <u-sticky >
      <!-- 只能有一个根元素 -->
      <scroll-view class="list-nav"  scroll-x="true" :scroll-with-animation="true" :scroll-into-view="toId">
      <span
          :class="[index === currIndex ? 'active' : '']"
          v-for="(item, index) in categoryList"
          :id="'item' + index"
          :key="index"
          @click="changeTab(index)">{{ item.cate_name }}</span>
      </scroll-view>
    </u-sticky>


    <div class="goodsList">
      <div class="item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="getnav('/pagesC/homeSon/goodsDetails?id=' + item.goods_id)">
        <span class="itemindex">{{index+1}}</span>
        <u-image :src="item.thumb_url" width="220" height="220" border-radius="12" style="margin-right:20px">
          <u-loading slot="loading"></u-loading>
        </u-image>
        <div class="item-right">
          <h2>{{ item.goods_name }}</h2>
          <u-line-progress v-if="false" :striped="true" :percent="$u.random(10,100)" active-color="#f82fce" :striped-active="true"></u-line-progress>
          <div class="item-right__bottom">
            <div class="item-right__bottom--left flex">
              <span class="goodsPrice">¥{{ item.price }}</span>
              <i >¥{{ item.shop_price }}</i>
            </div>
            <div class="pinBtn" >
              <p>去看看</p>

            </div>
          </div>
        </div>
      </div>
      <div class="no-more" v-if="status === 'nomore'">没有更多了</div>
    </div>
  </div>
</template>

<script>
import uniLoadMore from "../../components/uni-load-more.vue"

let page = 0
  export default {
    data () {
      return {
        toId: 'item000',
        pageShow: false,
        categoryList: [],
        currIndex: 0,
        list: [],
        status: 0,
        page: 0,
        isLoadMore: false,
        isLoading: false,
        isMore: false,
        bannerSrc:''
      }
    },

    onLoad (option) {
      page = 0
      this.getFightGroupCate()
      this.getFightGroupList(1)
      this.getBannerImage(option.id)
    },

		components: {
			uniLoadMore
		},

    methods: {
      getBannerImage(id){
        this.$http.getBannerImage({id}).then(res=>{
          this.bannerSrc = res.data.banner_url
        })
      },
      changeTab (index) {
        this.currIndex = index
        this.toId = `item${index}`
        page = 0
        this.list = []
        this.status = ''
        this.isLoadMore = false

        this.$nextTick(() => {
          this.getFightGroupList()
        })
      },

      getFightGroupCate () {
        this.$http.getFightGroupCate().then(res => {
          if (res.status === 200) {
            let data = res.data
            data.unshift({
              id: '',
              cate_name: '推荐'
            })
            this.categoryList = data
          }
        })
      },

      getFightGroupList (isFirst) {
        if (this.status === 'nomore' || this.status === 'loading') return

        if (page === 0) {
          this.$loading()
        }
				if (page > 0) {
					this.status = 'loading'
        }

        this.$http.getTgList({
          page: page + 1,
          cate_id: isFirst ? '' : this.categoryList[this.currIndex].id
        }).then(res => {
          if (res.status === 200) {
            page = page + 1

            if (!res.data.length) {
              this.status = 'nomore'
              return false
            }

					  this.list.push(...res.data)

            this.status = 'more'
            this.pageShow = true
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
page{
  background-color: #2a0f73;
}
.list{
  background-color: #2a0f73;

}
  .list-nav {
    height: 88upx;
    line-height: 88upx;
    font-size: 0;
    white-space: nowrap;
    background: #2a0f73;

    span.active {
      &::after {
        background: #fff;
      }
      font-weight: 800;
      color: #fff;
    }
    span {
      display: inline-block;
      position: relative;
      margin-right: 33upx;
      font-size: 30upx;
      color: #dbc9f1;

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 42upx;
        height: 4upx;
        background: transparent;
        transform: translateX(-50%);
        content: '';
      }

      &:first-child {
        margin-left: 30upx;
      }

      &:last-child {
        margin-right: 30upx;
      }
    }
  }

  .search {
    display: flex;
    align-items: center;
    height: 64uxp;
    margin: 100upx 24upx 12upx;
    padding-left: 46upx;
    background: rgba(241,241,241,1);
    border-radius: 32upx;

    i {
      padding-right: 16upx;
    }
  }

  .goodsList {

    .item {
      margin: 20upx ;
      border-radius: 18upx;
      display: flex;
      height: 244upx;
      padding: 15upx;
      background-color: #fff;
      position: relative;
      &index{
        position: absolute;
        top: 20upx;
        left: 20upx;
        background-color: rgba(#000,0.3);
        width: 40upx;
        height: 40upx;
        line-height: 40upx;
        display: inline-block;
        z-index:999;
        text-align: center;
        color:#fff;
        border-radius:5upx
      }

      .item-right {
        flex: 1;
        display: flex;
        overflow: hidden;
        height: 215upx;
        flex-direction: column;
        justify-content: space-between;
        align-items:stretch;
        .item-right__bottom {
          display: flex;
          justify-content: space-between;
          margin-top: 10upx;
          .pinBtn {
            text-align: center;
            background-image: linear-gradient(45deg, #f507b3, #f809b4);
            font-weight: bolder;
            border-radius: 12upx;
            color: #fff;
            font-size: 28upx;
            padding: 8upx 30upx;
            line-height: 28upx;
            .hasPinText{
              font-size: 20upx;
              font-weight: normal;
              color: #ffdef6;
              margin-top: 6upx;
            }
          }
          .item-right__bottom--right {
            width: 130upx;
            height: 51upx;
            line-height: 51upx;
            text-align: center;
            background: rgba(250,63,63,1);
            border-radius: 32upx;
            color: #fff;
            font-size: 28upx;
          }
        }

        .item-right__bottom--left {
          align-items: flex-end;
          span {
            padding-right: 12upx;
            color: #F7544E;
            font-size: 30upx;
          }

          i {
            color: #999;
            font-size: 24upx;
            text-decoration: line-through;
          }
        }

        h2 {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: 1.3;
          margin-bottom: 16upx;
          color: #333;
          font-size: 28upx;
        }

        & > span {
          display: block;
          margin-bottom: 29upx;
          color: #999;
          font-size: 24upx;
        }
      }
    }
  }
</style>
